import React, { useState, useRef, useEffect } from 'react';
import { connect, useDispatch } from 'umi';
import PageTopFormContent from '@/components/PageTopFormContent';
import { Button, message, Spin } from 'antd';
import styles from './AuthManage.less';
import RoleList from './components/role';
import IRoleList from './components/import-role';
import ResourceTree from './components/resourceTree';

const RoleManage = (props) => {
  const { common } = props;
  const { appCodeOfSelect } = common;
  const [roleCode, setRoleCode] = useState();
  const [iRoleVis, setiRoleVis] = useState(false);
  const [spinning, setSpinning] = useState(false);
  const dispatch = useDispatch();
  const authActiontRef = useRef();

  useEffect(() => {
    return () => {};
  }, [appCodeOfSelect]);

  let codes = 0;
  const onSave = () => {
    if (!roleCode) {
      message.warning('无操作数据');
      return;
    }
    const roleCodes = Object.keys(authActiontRef.current.getRoleResourceData());
    if (!roleCodes || roleCodes.length === 0) return;
    setSpinning(true);
    roleCodes.map((rCode) => updateAction(rCode));
  };

  const updateAction = (rCode) => {
    const datas = authActiontRef.current.getRoleResourceData();
    dispatch({
      type: 'authActManageModel/updateResourceActionListByRole',
      payload: {
        roleCode: rCode,
        appCode: appCodeOfSelect,
        resourceIds: Object.keys(datas[rCode]),
        data: datas[rCode],
      },
    }).then((res) => {
      if (res && res.code === 0) {
        codes += 1;
        if (codes === Object.keys(datas).length) {
          message.success('操作成功');
        }
        setRoleCode('');
      } else {
        message.error(res?.message);
      }
      setSpinning(false);
    });
  };

  const onCoverRoleResAct = (resourceActions) => {
    setiRoleVis(false);
    dispatch({
      type: 'authActManageModel/updateModel',
      payload: { resourceOfRole: resourceActions },
    });
    authActiontRef.current.setEditRoleResourceByCode(roleCode, resourceActions);
  };

  const onImpRole = () => {
    if (!roleCode) {
      message.warning('请先选择需要导入的角色！');
      return;
    }
    setiRoleVis(true);
  };

  return (
    <div className={styles.root}>
      <Spin spinning={spinning}>
        <PageTopFormContent title="权限管理" />
        <div className={styles.actions}>
          <Button type="primary" onClick={onSave}>
            保存
          </Button>
          <Button onClick={onImpRole}>导入权限模板</Button>
        </div>
        <div className={styles.bottomWrapper}>
          <RoleList
            appCodeOfSelect={appCodeOfSelect}
            setRoleCode={setRoleCode}
            roleCode={roleCode}
          />
          <ResourceTree
            appCodeOfSelect={appCodeOfSelect}
            ref={authActiontRef}
            roleCode={roleCode}
          />
        </div>
        {IRoleList && (
          <IRoleList
            iRoleVis={iRoleVis}
            appCodeOfSelect={appCodeOfSelect}
            onOk={onCoverRoleResAct}
            onCancel={() => setiRoleVis(false)}
          />
        )}
      </Spin>
    </div>
  );
};

export default connect((state) => state)(RoleManage);
